<template>
  <div v-if="element.componentProps.name" class="slot-widget-wrap">
    <!-- 动态传递插槽 -->
    <slot :name="element.componentProps.name">
      <div class="default-slot-content">插槽内容 - 插槽名"{{ element.componentProps.name }}"</div>
    </slot>
  </div>
  <div v-else>请给在右侧配置插槽名称,英文命名</div>
</template>

<script lang="ts">
import { defineComponent, inject, toRefs } from "vue";
import type { LowCodeImp, ComponentImp } from "@/components/low-code/core/type";

export default defineComponent({
  name: "slotWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs(props);

    return {
      element,
      lowCode,
    };
  },
});
</script>

<style scoped>
.default-slot-content{
  height: fit-content;
  color:chocolate;
}
</style>
